<template>
	<view class="bill-container flex fd-c">
		<topBar :back="true">
			<template #center style="width: 100%;">
				<!-- 导航栏 -->
				<view class="nav-bar flex ai-c jc-c">
					<view class="nav-tabs">
						<view class="tab-item">
							<text>兑换记录</text>
						</view>
					</view>
				</view>
			</template>
		</topBar>
		<view class="exchange-records-container">
			<view class="exchange-records-item" v-for="(item, index) in exchangeRecords" :key="index" @click="handleDetail(item)">
				<view class="flex ai-c" style="gap: 22rpx;">
					<image :src="BASE_URL + item.goodinfo.image" mode="aspectFit" style="width: 204rpx;height: 128rpx;border-radius: 20rpx;">
					</image>
					<text style="font-size: 28rpx;color: #000;">{{ item.goodinfo.goods_name }}</text>
				</view>
				<view class="flex jc-fd" style="align-items: flex-end;gap: 8rpx;">
					<view style="font-size: 26rpx;color: rgba(0, 0, 0, 0.8);">消耗</view>
					<view style="font-size: 48rpx;color: #0F50DC;">{{ item.points }}</view>
					<view style="font-size: 26rpx;color: #0F50DC;font-weight: 700;">积分</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/index.js'
import api from '@/api'
import { BASE_URL } from '@/utils/request'
const userStore = useUserStore()

const exchangeRecords = ref([])
onLoad(() => {
	api.getExchangeRecords({
		user_id: userStore.userInfo.id
	}).then(res => {
		exchangeRecords.value = res.data
	})
})
const handleDetail = (item) => {
	uni.navigateTo({
		url: `/pages/index/exchangeRecords/detail/detail?id=${item.id}`
	})
}
</script>

<style scoped>
.bill-container {
	height: 100vh;
	background-color: #f0f0f0;
	position: relative;
}

.exchange-records-container {
	padding: 32rpx;
	padding-top: 40rpx;
	flex: 1;
	overflow-y: auto;
}

.exchange-records-item {
	padding: 32rpx;
	background-color: #fff;
	border-radius: 24rpx;
	margin-bottom: 20rpx;
}


</style>
